<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>商品信息</title>
    <link rel="stylesheet" href="../../../../public/dist/css/layui.css">
    <link rel="stylesheet" href="../../../../public/font/iconfont.css">
    <link rel="stylesheet" href="../../../../css/twocss/commit.css">
</head>

<body>
    <form class="layui-form" action="">

        <div class="select common">
            <div class="select-title">查询条件</div>

            <div class="select-con">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width:95px;">商品名称:</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input   Suppliername">
                        </div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">采购单号:</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input   Purchaseorder">
                        </div>
                    </div>
                </div>

                <div class="select-btn">
                    <div class="layui-bg-green comquery   Rawquery">查询</div>
                    <div class="layui-bg-green comquery  reset">重置</div>
                </div>
            </div>
        </div>
    </form>
    <div class="common-padding">
        <table class="layui-hide" id="testdone" lay-filter="testdome"></table>
    </div>
</body>
<!-- 头部 -->
<script type="text/html" id="toolbarinter">
    <div class="layui-btn-container ">
        <button class="layui-btn  layui-btn-sm colors" lay-event="add"><i class="layui-icon"></i></i>添加</button>
        <button class="layui-btn  layui-btn-sm colors" lay-event="update"><i class="layui-icon"></i>编辑</button>
        <button class="layui-btn  layui-btn-sm colors" lay-event="delete"><i class="layui-icon"></i>删除</button>
    </div>
</script>

<!-- 里面的查看 -->
<script type="text/html" id="More">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>

<!-- 查看的内容 -->
<script type="text/html" id="contentquery">
    <div class="select common">

        <div class="select-title" style="border-bottom:0px;background-color: #f3f3f3;">
            基本信息
        </div>
        {{each lists}}
        <ul class="basis-h">

            <li>
                <label>商品名称:</label>
                <p>{{$value.productname}}</p>
            </li>
            <li>
                <label>商品条码:</label>
                <p>{{$value.barcode}}</p>
            </li>
            <li>
                <label>商品类型:</label>
                <p>{{$value.producttype}}</p>
            </li>
            <li>
                <label>审批状态:</label> {{if $value.approval== 0 }}
                <p>未审核</p>
                {{else if $value.approval== 1}}
                <p>审核通过</p>
                {{else}}
                <p>审核未通过</p>
                {{/if}}
            </li>
            <li>
                <label>规格:</label>
                <p>{{$value.specifications}}</p>
            </li>
            <li>
                <label>保质期:</label>
                <p>{{$value.lifedate}}{{$value.lifedateunit}}</p>
            </li>
            <li>
                <label>重量(kg):</label>
                <p style="width: 190px;">{{$value.weight}} </p>
            </li>

            <li>
                <label>品牌:</label>
                <p style="width: 190px;">{{$value.brand}} </p>
            </li>

            <li>
                <label>单位:</label>
                <p style="width: 190px;">{{$value.unit}} </p>
            </li>

            <li>
                <label>企业编号:</label>
                <p style="width: 190px;">{{$value.enterprisecode}} </p>
            </li>
            <li>
                <label>生产许可证:</label>
                <p style="width: 190px;">{{$value.factorylicence}} </p>
            </li>
            <li>
                <label>是否散装:</label>
                <p style="width: 190px;">{{$value.issanzhuang}} </p>
            </li>

        </ul>
        <div style="margin-left:80px;"><label>产品图片：</label><img style="width:150px;" src="{{$value.picturepath}}" alt=""></div>
        {{/each}}
    </div>

</script>

<script src="../../../../js/common/jquery.min.js"></script>
<script src="../../../../js/common/api.js"></script>
<script src="../../../../public/dist/layui.js" charset="utf-8"></script>
<script src="../../../../js/common/template-web.js"></script>
<script>
    layui.use(['table', "layer", "laydate", "util"], function() {
        var $ = layui.jquery,
            table = layui.table,
            util = layui.util,
            layer = layui.layer,
            datelist = {},
            laydate = layui.laydate;

        //监听头部监听
        table.on('toolbar(testdome)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id),
                data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    window.location.href = "./dialog/addProduct.html";
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {

                        window.location.href = "./dialog/addProduct.html?id=" + data[0].id;
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        console.log(data)
                        handleAjax("shop/delShopproduct", {
                            id: data[0].id
                        }, "POST").done(function(resp) {
                            layer.msg('操作成功', {
                                icon: 1,
                                time: 1000
                            });
                            setTimeout(function() {
                                tableIns.reload({
                                    where: {},
                                    page: {
                                        curr: 1, //重新从第 1 页开始
                                        layout: ['prev', 'page', 'next', 'skip', 'count']
                                    },
                                })
                            }, 1500)
                            return
                        }).fail(function(err) {
                            console.log(err)
                        });
                    }
                    break;
            };
        });

        //监听表格里面按钮
        table.on('tool(testdome)', function(obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'detail') { //查看
                procurement(data.id);
            }

            if (obj.event === 'showImg') {
                console.log(data);
                var photosdata = {
                    "title": "营业执照", //相册标题
                    "id": 123, //相册id
                    "start": 0, //初始显示的图片序号，默认0
                    "data": [ //相册包含的图片，数组格式
                        {
                            // "alt": "图片名",
                            "pid": 666, //图片id
                            "src": data.picturepath, //原图地址
                            "thumb": data.picturepath //缩略图地址
                        }
                    ]
                }
                layer.photos({
                    photos: photosdata //格式见API文档手册页
                        ,
                    anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                });
            }
        });


        /*查看*/
        function procurement(tt) {
            layer.open({
                type: 1,
                title: "查看",
                shadeClose: true, //是否点击遮罩关闭
                anim: 5, //弹出动画
                scrollbar: false, //窗口外滚动条是否出现
                skin: 'layui-layer-rim', //加上边框
                area: ['950px', '400px'], //宽高
                content: '<div class="ssss"></div>',
                success: function(layero, index) {

                    noAjax('shop/getShopproductList', {
                        id: tt
                    }, "GET").done(function(resp) {

                        var html = template("contentquery", resp.pageBean);
                        $(".ssss").html(html);
                    }).fail(function(err) {
                        console.log(err)
                    });
                }
            });
        }


        //获取列表
        var tableIns = table.render({
            elem: '#testdone',
            url: base + "shop/getShopproductList",
            method: "GET",
            where: {

            },
            headers: {
                Authorization: "Bearer" + " " + sessions
            },
            request: {
                pageName: "currentPage",
                limitName: "pageSize"
            },
            toolbar: "#toolbarinter",
            limits: [10, 20],
            parseData: function(res) {
                //res 即为原始返回的数据
                console.log(res);
                return {
                    code: res.code, //解析接口状态
                    msg: res.message, //解析提示文本
                    totalNum: res.pageBean.totalNum, //解析数据长度
                    lists: res.pageBean.lists //解析数据列表
                };
            },
            response: {
                statusName: "code", //数据状态的字段名称，默认：code
                statusCode: 10000, //成功的状态码，默认：0
                msgName: "message", //状态信息的字段名称，默认：msg
                countName: "totalNum", //数据总数的字段名称，默认：count
                dataName: "lists" //数据列表的字段名称，默认：data
            },
            cellMinWidth: 80,
            page: {
                layout: ["prev", "page", "next", "skip", "count"], //自定义分页布局
                groups: 5, //只显示 1 个连续页码
                first: true, //不显示首页
                last: true, //不显示尾页
                prev: "上一页",
                next: "下一页",
                theme: "#c81623"
            },
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: "productname",
                    title: '商品名称',
                    minWidth: 100,
                    sort: true,
                    align: "center",
                }, {
                    field: 'barcode',
                    title: '商品条码',
                    minWidth: 160,
                    align: "center",
                }, {
                    field: 'producttype',
                    title: '商品类型',
                    minWidth: 130,
                    align: "center",
                }, {
                    field: 'specifications',
                    title: '规格',
                    minWidth: 120,
                    align: "center",
                    sort: true
                }, {
                    field: 'approval',
                    title: '审批状态',
                    minWidth: 120,
                    align: "center",
                    templet: function(d) {
                        var num = null;
                        console.log(d.approval)
                        if (d.approval == "0") {
                            num = "未审核"
                            return num
                        }
                        if (d.approval == "1" || d.approval == "审批通过") {
                            num = "审批通过"
                            return num
                        }
                        if (d.approval == "2" || d.approval == "审批不通过") {
                            num = "审批不通过"
                            return num
                        }
                    }
                }, {
                    field: 'unit',
                    title: '单位',
                    minWidth: 100,
                    align: "center",
                    sort: true
                }, {
                    field: 'enterprisecode',
                    title: '企业编号',
                    minWidth: 100,
                    align: "center",
                }, {
                    field: 'factorylicence',
                    title: '生产许可证',
                    minWidth: 120,
                    align: "center",
                    sort: true
                }, {
                    field: 'picturepath',
                    title: '产品图片',
                    minWidth: 120,
                    align: "center",
                    event: 'showImg',
                    templet: function(d) {
                        if (d.picturepath != null) {
                            return '<img src="' + d.picturepath + '" alt="" class="licenseimg">'
                        }

                    }
                }, {
                    field: 'wealth',
                    width: 137,
                    title: '更多',
                    minWidth: 20,
                    align: "center",
                    fixed: 'right',
                    toolbar: '#More',
                }]
            ]
        });


        /*查询*/
        $(".Rawquery").click(function() {
            if ($(".Suppliername").val() == "" && $(".Purchaseorder").val() == "") {
                layer.msg('请输入查询条件！', {
                    time: 1000,
                    offset: 't',
                });
                return
            }
            datelist = {
                productname: $(".Suppliername").val(),
                barcode: $(".Purchaseorder").val()
            }
            console.log(datelist)
            tableIns.reload({
                where: datelist,
                page: {
                    curr: 1, //重新从第 1 页开始
                    layout: ['prev', 'page', 'next', 'skip', 'count']
                },
            })
        })


        /*重置*/
        $(".reset").click(function() {
            $(".Suppliername").val("");
            $(".Purchaseorder").val("");
            tableIns.reload({
                where: {},
                page: {
                    curr: 1, //重新从第 1 页开始
                    layout: ['prev', 'page', 'next', 'skip', 'count']
                },
            })
        })

    })
</script>

</html>